<template>
	<view class="container">
    <block v-if="!orderDetail.toAddress">
      <view v-if="refundStatus.indexOf(orderDetail.orderStatus) === -1" class="head">
        <view class="status font-16 font-weight-500">
          <view class="status_left">
            <image
              :src="orderDetail.orderStatus === 'NEW' ? require('@/static/home/orderStatus_NEW.png') :require('@/static/home/orderStatus.png')"
              class="img" mode="aspectFill" />
            {{ status[orderDetail.orderStatus] || '' }}
          </view>
          <view v-if="orderDetail.orderStatus === 'NEW'" class="leftTime">
            剩余 {{ leftTime }}
          </view>
        </view>
        <view v-if="orderDetail.orderStatus === 'WAIT_USE'" class="tips font-13 color-fff">
          请提前安排好您的出行时间
        </view>
        <view v-if="orderDetail.orderStatus === 'NEW'" class="tips font-13 color-fff">
          订单为您保留30分钟，请尽快支付！
        </view>
      </view>
    </block>
		<view class="btnContainer" v-if="orderDetail.orderStatus === 'WAIT_USE' && orderDetail.refundFlag === 'Y'">
			<button
			  class="btn btn-only"
			  @click="jumpToRefund(orderDetail.id)"
			>
			  申请退款
			</button>
		</view>
		<view v-if="orderDetail.orderStatus === 'NEW'" class="btnContainer">
			<button class="btn" :loading="cancelBtnLoading" :disabled="cancelBtnLoading" @click="confirmCancelOrder">
				取消订单
			</button>
			<button class="btn btn_r" @click="onPay">
				立即付款
			</button>
		</view>
		<view v-if="refundStatus.indexOf(orderDetail.orderStatus) > -1" class="refundCard">
			<uni-steps :options="steps" :active="active" />
		</view>
		<view v-if="refundStatus.indexOf(orderDetail.orderStatus) > -1 && refundInfo.refundTime" class="card">
			<view class="title font-15 color-555 font-weight-500">
				退款详情
			</view>
			<view class="refundFooter">
				<p>申请时间：{{ refundInfo.refundTime || '' }}</p>
				<p>退款原因：{{ refundInfo.reason || '' }}</p>
				<p>退款金额：{{ refundInfo.amount + '元' || '' }}</p>
				<p v-if="refundInfo.couponNumber">
					退款快乐券张数：{{ refundInfo.couponNumber + '张' || '' }}
				</p>
				<p>退还方式：原路返回</p>
			</view>
		</view>
		<view class="card">
			<view class="title font-15 color-555 font-weight-500">
				订单详情
			</view>
			<view class="middle">
				<image class="left" :src="orderDetail.productImage" mode="aspectFill" />
				<view class="right">
					<view>{{ orderDetail.productName || '' }}</view>
					<view class="price font-12">
						¥ {{ orderDetail.price || '' }}
					</view>
				</view>
			</view>
			<view class="footer">
				<p>订单编号：{{ orderDetail.orderNo || '' }}</p>
				<p>下单时间：{{ orderDetail.createTime || '' }}</p>
				<p v-show="orderDetail.payTime">
					支付时间：{{ orderDetail.payTime || '' }}
				</p>
			</view>
		</view>
		<view class="list">
			<view class="item" v-if="!orderDetail.toAddress">
				<view class="label">
					出发日期：
				</view>
				<view class="val">
					{{ orderDetail.touristDate || '' }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					{{orderDetail.toAddress?'数量':'出游人数'}}：
				</view>
				<view class="val">
					{{ orderDetail.buyNumber || '' }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					单价：
				</view>
				<view class="val">
					¥{{ orderDetail.price || '' }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					合计：
				</view>
				<view class="val">
					¥{{ orderDetail.amount || '0' }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					优惠：
				</view>
				<view class="val">
					- ¥0
				</view>
			</view>
			<view class="item">
				<view class="label">
					快乐券抵扣：
				</view>
				<view class="val">
					¥{{ orderDetail.couponNumber * faceValue || '0' }}
				</view>
			</view>
			<view class="item" v-if="orderDetail.toAddress">
				<view class="label">
					收货地址：
				</view>
				<view class="val">
					{{ orderDetail.toAddress}}
				</view>
			</view>
			<view class="item" v-if="orderDetail.expressCompanyName">
				<view class="label">
					物流公司：
				</view>
				<view class="val">
					{{ orderDetail.expressCompanyName }}
				</view>
			</view>
			<view class="item" v-if="orderDetail.expressCompanyName">
				<view class="label">
					物流单号：
				</view>
				<view class="val">
					{{ orderDetail.expressNo }}
				</view>
			</view>
			<view v-show="orderDetail.payStatus === 'SUCCESS'" class="item pay">
				<view class="label">
					已支付：
				</view>
				<view class="val">
					¥{{ orderDetail.realAmount || '0' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onLinePay
	} from '@/common/js/ddPay.js';
	import {
		getSplitTime
	} from '@/common/js/util.js';
	import uniSteps from '@/components/uni-steps/uni-steps.vue';

	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				orderDetail: {
          toAddress:'1'
        },
				status: {
					NEW: '待付款',
					WAIT_USE: '未出行',
					REFUNDING: '退款中',
					REFUNDED: '退款成功',
					REFUNDREFUSED: '拒绝退款',
					FINISHED: '订单完结',
					CANCEL: '已取消'
				},
				refundStatus: [
					'REFUNDING',
					'REFUNDED',
					'REFUNDREFUSED',
				],
				steps: [{
					title: '提交申请'
				}, {
					title: '退款中'
				}, {
					title: '退款成功'
				}],
				active: 0,
				refundInfo: {
          refundTime:""
        },
				faceValue: this.$store.state.faceValue || 50,
				cancelBtnLoading: false,
				payBtnLoading: false,
				Timers: {},
				leftTime: '00:00',
				reGetData: true
			};
		},
		onLoad(options) {
			console.log(options)
      console.log(this.$store.state.faceValue)
			if(!this.reGetData) this.reGetData = true;
			if (options.id || options.orderNo) {
				if (options.id) this.queryData(options.id);
				if (options.orderNo) this.queryDataById(options.orderNo);
			} else {
				uni.showToast({
					title: '未获取到订单id'
				});
			}
		},
		onHide() {
			for (let e in this.Timers) {
				console.log('onhide清除当前的定时器');
				clearInterval(this.Timers[e]);
			}
		},
		onUnload() {
			for (let e in this.Timers) {
				console.log('清除当前的定时器');
				clearInterval(this.Timers[e]);
			}
		},
		methods: {
			// 倒计时
			countDown(expireDate) {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/systemTime',
				}).then(res => {
					const now = new Date(res.data);
					// ios不支持xxxx-xx-xx xx:xx的格式，不能有-
					const expireDate_date = new Date(expireDate.replace(/-/g,'/'));
					let nowTime = now.getTime(); // 这里应该要获取服务器时间才准确
					const expireTime = expireDate_date.getTime();
					const timeSplit = 100;
					const timer = setInterval(() => {
						nowTime += timeSplit;
						this.leftTime = getSplitTime(nowTime, expireTime);
						if (this.leftTime === '00 分 00 秒') {
							if (this.reGetData) {
								this.queryData(this.orderDetail.id);
								this.reGetData = false;
							}
							clearInterval(timer);
						} else if (this.leftTime === '00:00') {
							clearInterval(timer);
						}
					}, timeSplit);
					this.Timers['timer1'] = timer;
				}).catch(() => {
					uni.showToast({
						title: '获取系统时间失败'
					})
				});
			},
			// 订单详情获取
			queryData(id, status) {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/queryById',
					data: {
						id
					}
				}).then(res => {
					this.handleOrder(res);
					if (status === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}).finally(err => {
					uni.hideLoading();
				});
			},
			// 订单编号获取订单
			queryDataById(orderNo) {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/queryByOrderNo',
					data: {
						orderNo
					}
				}).then(res => {
					this.handleOrder(res);
				}).finally(err => {
					uni.hideLoading();
				});
			},
			handleOrder(res) {
				this.orderDetail = res.data;
				if (res.data.orderStatus === 'NEW' && res.data.expireDate) {
					this.countDown(res.data.expireDate);
				}
				if (this.refundStatus.includes(res.data.orderStatus) > -1) {
					this.getRefundInfo(res.data.orderNo);
				}
				const {
					orderStatus
				} = res.data;
				if (orderStatus === 'REFUNDING') this.active = 1;
				if (orderStatus === 'REFUNDED') this.active = 2;
				if (orderStatus === 'REFUNDREFUSED') {
					this.active = 2;
					this.steps = [{
						title: '提交申请'
					}, {
						title: '退款中'
					}, {
						title: '商家拒绝'
					}];
				}
			},
			// 确认取消订单
			confirmCancelOrder() {
				uni.showModal({
					title: '温馨提示',
					content: '是否取消订单支付？',
					cancelText: '否',
					confirmText: '是',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.cancelOrder();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete: function(e) {
						console.log('uni.showModal调用结果', e)
					}
				});
			},
			// 取消订单
			cancelOrder() {
				this.cancelBtnLoading = true;
				this.$ajax({
					method: 'post',
					url: '/outing/mobile/order/canaelOrder',
					data: {
						orderNo: this.orderDetail.orderNo
					}
				}).then(res => {
					uni.showToast({
						title: res.message || '订单取消成功'
					});
					// 刷新订单
					this.queryData(this.orderDetail.id);
				}).finally(e => {
					this.cancelBtnLoading = false;
				});
			},
			// 立即支付
			onPay() {
				this.payBtnLoading = true;
				// 请求支付
				onLinePay(this.orderDetail.orderNo).finally(e => {
					this.payBtnLoading = false;
				});
			},
			// 获取退款详情
			getRefundInfo(orderNo) {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/queryRefundDetail',
					data: {
						orderNo
					}
				}).then(res => {
					console.log('获取的退款详情', res);
					this.refundInfo = res.data;
				});
			},
			jumpToRefund(id) {
				uni.redirectTo({
					url: `/subPages/personalCenter/order/refund?id=${id}`
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: #f7f9fb;

		.head {
			width: 100%;
			height: 170rpx;
			padding-top: 40rpx;
			background: linear-gradient(183deg, #ff6541 0%, #fdc27d 100%);

			.status {
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status_left {
					.img {
						vertical-align: sub;
						margin: 0 17rpx 0 28rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.leftTime {
					font-size: 26upx;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 40upx;
				}
			}

			.tips {
				margin-top: 10rpx;
				padding-left: 85rpx;
			}
		}

		.btnContainer {
			display: flex;
			justify-content: flex-end;
			height: 94upx;
			align-items: center;
			background: #FFFFFF;
			
			.btn-only {
				margin: 0 20rpx 0;
			}

			.btn {
				width: 152rpx;
				height: 54rpx;
				border-radius: 27rpx;
				// opacity: 0.2;
				border: 1rpx solid #00000030;
				font-size: 26rpx;
				font-weight: 400;
				color: #555555ad;
				line-height: 54rpx;
				align-items: center;
				justify-content: center;
			}

			.btn_r {
				margin: 0 20rpx 0;
				border: none;
				background: #F74747;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.refundCard {
			margin: 20rpx 20rpx 0 20rpx;
		}

		.card {
			width: 710rpx;
			margin: 20rpx 20rpx 0 20rpx;
			background: #ffffff;
			border-radius: 10rpx;

			.title {
				height: 72rpx;
				padding: 20rpx;
				border-bottom: 1px solid #e8e8e8;
			}

			.middle {
				display: flex;
				padding: 30rpx 20rpx;

				.left {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.right {
					color: #333333;
					font-weight: 500;
					font-size: 28rpx;
					// position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.price {
						// position: absolute;
						// bottom: 0;
						// left: 0;
					}
				}
			}

			.refundFooter {
				padding: 30rpx 20rpx;

				p {
					margin-bottom: 20rpx;
					font-size: 28rpx;
				}
			}

			.footer {
				padding: 0 20rpx 30rpx 20rpx;

				p {
					margin-bottom: 5rpx;
					color: #999;
					font-size: 24rpx;
					line-height: 33rpx;
				}
			}
		}

		.list {
			background: #fff;
			width: 710rpx;
			margin: 20rpx;
			border-radius: 10rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 80rpx;
				padding: 20rpx 20rpx;
				color: #333;
				font-size: 28rpx;
				border-bottom: 1px solid #e8e8e8;
        .label {
          flex-shrink: 0;
          flex-direction: 1;
        }
			}

			.pay {
				height: 104rpx;
				border: none;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
